<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="swiper-lib/swiper-bundle.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: 0;
            -webkit-tap-highlight-color: transparent;
        }

        .swiper {
            width: 3.54rem;
            height: 1.41rem;
        }

        .swiper img {
            width: 100%;
            height: 100%;
        }

        #fyq1 {
            left: 50%;
            margin-left: -0.3rem;
            display: flex;
            width: 0.6rem;
            justify-content: space-around;
        }

        .swiper .xiaoyuandian {
            width: 0.1rem;
            height: 0.1rem;
            background-color: rgba(250, 123, 50, 0.600);
            margin-right: 0.05rem;
            border-radius: 50%;
        }

        .swiper .current {
            background-color: rgba(255, 0, 0, 0.6);
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/banner1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="images/banner2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="images/banner3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="images/banner4.jpg" alt="">
            </div>

        </div>
        <div class="swiper-pagination" id="fyq1"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <!-- 导航等组件可以放在Swiper容器之外 -->

    <script src="swiper-lib/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            speed: 300,
            autoplay: {
                delay: 1000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            pagination: {
                el: '#fyq1',
                // 小圆点的类名
                bulletClass: 'xiaoyuandian',
                // 当前小圆点的类名
                bulletActiveClass: 'current'
            },
        })        
    </script>
    <script>
        !function (e, t) { var n = t.documentElement, d = e.devicePixelRatio || 1; function i() { var e = n.clientWidth / 3.75; n.style.fontSize = e + "px" } if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e) }(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function (e) { e.persisted && i() }), 2 <= d) { var o = t.createElement("body"), a = t.createElement("div"); a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o) } }(window, document)
    </script>
</body>

</html>